<template>
	<view class="content">
		<view class="zbc" v-if="zbc">
			<view class="xiuxi">{{msg}}</view>
		</view>
		<div class="sifangc-box">
			<view class="search-box">
				<!-- 设置圆角 -->
				<uni-search-bar :radius="100" @confirm="search" v-model="keyword" ></uni-search-bar>
			</view>
			<view class="sifangc-list">
				<scroll-view class="menu-wrapper" scroll-y :style="'height:'+windows_height+'px'" :scroll-top="left_scroll" scroll-with-animation="true">
					<view class="left-content">
						<view style="position: relative;" v-for="(item,index) in goods" :key="index" ref="menuList" @click="select(index)"
						 :class="{'current': currentIndex == index}">
							<view class="menu-item">{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
				<!-- 右侧滚动 -->
				<scroll-view class="foods-wrapper" scroll-y  :style="'height:'+windows_height+'px'" :scroll-top="foodSTop" @scroll="myscroll" scroll-with-animation="true">
					<view ref="foodsWrapper">
						<view ref="foodList" class="foods" v-for="(item, i) in goods" :key="i">
							<view class="foods-btou">
								<text style="display: none;">{{item.name}}</text>
								<!-- <text :class="item.index == -1?'active':''" @click="childrenCk(-1,i,'')">全部</text> -->
								<text :class="item.index == c?'active':''" v-for="(children, c) in item.children"
									:key="c" @click="childrenCk(c,i,children.id,children.title)">{{children.title}}</text>
							</view>
							<view class="food-title">
								{{item.names}}
							</view>
							<view class="food" v-if="item.foods.length == 0" style="margin-bottom: 20px;">
								<view class="food-info" style="height: 20px;text-align: center;width: 100%;color:#999;">暂无菜品</view>
							</view>
							<view class="food" v-else v-for="(food, index) in item.foods" :key="index" style="margin-bottom: 20px;">
								<image :src="food.cover" mode="aspectFill" style="width: 75px;height: 75px;border-radius: 10px;" @click="details(food.id)"></image>
								<view class="food-info" style="display: inline-block;height: 75px;vertical-align: top; width: 65%;">
									<text style="font-size: 14px;margin-top: 2px; margin: 5upx auto;">{{food.title}}</text>
									<text style="font-size: 12px;margin: 2px 0 4px; color: #999;display: block;">月售{{food.sales}}</text>
									<!-- 加减 -->
									<view class="food-btm" style="margin-top: 2px;">
										<text class="food-price"><text>￥{{food.discount_price}}</text><text>￥{{food.market_price}}</text></text>
										<cartcontrol :food="food" @add="addCart" @dec="decreaseCart"></cartcontrol>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<shopcart :goods="GWClist" @add="addCart" @dec="decreaseCart" @delAll="delAll" @tijiao="tijiaock"></shopcart>
			</view>
		</div>
		<view class="zbc" v-if="shuoming">
			<view class="yuedu-tc">
				<button class="qx-btn" @click="queding">×</button>
				<view class="yuedu-tc-box">
					<view class="yuedu-tc-bt">订餐说明</view>
					<view class="yuedu-tc-text-box">
						<view class="yuedu-tc-text">
							<view>1、订餐：为保证菜品多样及食材新鲜，需隔天下单（至少提前12小时），即当晚23:00前订制第二天的餐；</view>
							<view>2、消单：仅限于次日凌晨00:00前取消订单；</view>
							<view>3、改单：可在次日配送时间1小时前电联：13697578503，要求延后，原则上不超过2天；</view>
							<view>4、私房菜满20元给予配送，如与“个性点餐”同时下单则不受限制。</view>
						</view>
					</view>
					<view class="tc-btn-box">
						<view class="mshi-btn active">已阅读上述订餐说明</view>
						<button class="qued-btn" @click="queding">确定</button>
					</view>
				</view>
			</view>
		</view>
		<view class="pesong-sj">
			<text class="pesong-sj-txt">今天23点前下单，最早明天 11：30开始配送</text>
		</view>
	</view>
</template>

<script> 
	import shopcart from '@/components/shopcart.vue'
	import cartcontrol from '@/components/cartcontrol.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				goods:[],
				GWClist:[],
				keyword:'',
				zbc:false,
				msg:'',
				shuoming:false,
				windows_height: 0, //屏幕高度
				foodSTop: 0, //右侧的滑动值
				currentIndex: 0,
				last: 0,
				right_height: [], //右侧每个内容的高度集合
				select_index: 0,
				left_height: 0, //左侧总高度
				left_scroll: 0, //左侧滑动值
				catrgoryList: [],
				timeout: null
			}
	
		},
		components: {
			shopcart,
			cartcontrol
		},
		onLoad() {
			this.windows_height = Number(uni.getSystemInfoSync().windowHeight) - 140;
			setTimeout(()=>{
				this.getHeightList();
			},1000)
		},
		onShow(){
			this.keyword = ''
			this.goods = []
			var than = this;
			uni.request({
				url: getApp().globalData.http + "/config/orderStatus",
				data: {},
				method: "post",
				header: {
					"content-type": "application/x-www-form-urlencoded",
					token: uni.getStorageSync("token")
				},
				success: res => {
					if (res.data.code == 1) {
						 console.log(getApp().globalData.kaiguan2);
						 
						if (getApp().globalData.kaiguan2) {
							than.shuoming = true
						}else{
							than.shuoming = false
						}
						this.getList1()
					} else {
						than.msg = res.data.msg
						than.zbc = true
						than.xiuxi = true
					}
				}
			});
		},
		computed: {
			getList() {
				let result = [];
				this.goods.forEach((good) => {
					good.foods.forEach((food) => {
						if (food.count) {
							result.push(food)
						}
					})
				})
				return result
			},
			// 获得购物车所有商品数量
			getAllCount: function(item) {
				let result = [];
				let count = 0;
				for (let i = 0; i < this.goods.length; i++) {
					count = 0;
					this.goods[i].foods.forEach((food) => {
						if (food.count >= 0) {
							count += food.count
						}
					})
					result.push(count)
				}
	
				result.sort(function(a, b) {
					return a - b;
				})
				count = result[result.length - 1]
				return count;
			},
		},
		methods: {
			getList1() { //获取一级分类
				var than = this;
				uni.request({
					url: getApp().globalData.http + "/goods/getClass",
					data: {
						pid: 0
					},
					method: "post",
					header: {
						"content-type": "application/x-www-form-urlencoded",
						token: uni.getStorageSync("token")
					},
					success: res => {
						if (res.data.code == 1) {
							res.data.data.forEach((e, num) => {
								than.goods.push({
									name: e.title,
									names:'',
									id: e.id,
									index:0,
									children: [],
									foods: []
								})
								this.getList2(e.id, num)
							});
						} else {
							wx.showToast({
								title: res.data.msg,
								icon: "none",
								duration: 2000
							});
						}
					}
				});
			},
			getList2(id, num) { //获取二级分类
				var than = this;
				uni.request({
					url: getApp().globalData.http + "/goods/getClass",
					data: {
						pid: id
					},
					method: "post",
					header: {
						"content-type": "application/x-www-form-urlencoded",
						token: uni.getStorageSync("token")
					},
					success: res => {
						if (res.data.code == 1) {
							than.goods[num].children = res.data.data
							than.goods[num].names = res.data.data[0].title
							this.getList3(id, res.data.data[0].id, num,res.data.data[0].title)
						} else {
							wx.showToast({
								title: res.data.msg,
								icon: "none",
								duration: 2000
							});
						}
					}
				});
			},
			getList3(id1, id2, num,name) { //获取主菜
				var than = this;
				uni.request({
					url: getApp().globalData.http + "/goods/getList",
					data: {
						top_class_id: id1,
						sub_class_id: id2,
						keyword: this.keyword,
						page: 1,
						psize: 9999
					},
					method: "post",
					header: {
						"content-type": "application/x-www-form-urlencoded",
						token: uni.getStorageSync("token")
					},
					success: res => {
						if (res.data.code == 1) {
							res.data.data.data.forEach(e => {
								e.num = 0
								e.idNum=''
							});
							than.goods[num].foods = res.data.data.data
							than.goods[num].names = name
							this.getGWC()
						} else {
							wx.showToast({
								title: res.data.msg,
								icon: "none",
								duration: 2000
							});
						}
					}
				});
			},
			childrenCk(index,i,id,name) {  //切换二级菜单
				this.goods[i].index = index
				this.getList3(this.goods[i].id,id,i,name)
			},
			queding() {
				this.shuoming = false
				getApp().globalData.kaiguan2 = false
			},
			details(id){
				wx.navigateTo({
      	  url: '/pages/my/private-info?id=' + id
      	});
			},
			addCart: function(item) {  //加菜
				let goodsid = item.id
				if (item.goods_id){
					goodsid = item.goods_id
				}
				var than = this;
				uni.request({
					url: getApp().globalData.http + "/shoppingCart/put",
					data: {
            type:1,
						goods_id:goodsid,
						num:1,
						remark:'',	
						detail:{
							id:item.id,
							title:item.title,
							cover:item.cover,
							market_price:item.market_price,
							discount_price:item.discount_price,
						}
					},
					method: "post",
					header: {
						token: uni.getStorageSync("token")
					},
					success: res => {
						if (res.data.code == 1) {
								item.num++
								than.goods.forEach((good) => {
									good.foods.forEach((food) => {
										console.log(item.idNum,food.idNum);
										if (item.idNum == '') {
											if (item.id == food.id){
												food.num = item.num
											}
										}else{
											if (item.idNum == food.idNum){
												food.num = item.num
											}
										}
									})
								})
								console.log(than.goods);
								than.getGWC()
						} else {
							wx.showToast({
								title: res.data.msg,
								icon: "none",
								duration: 2000
							});
						}
					}
				});
			},
			getGWC(){ //获取购物车列表    
				var than = this                          
				uni.request({
					url: getApp().globalData.http + "/shoppingCart/getList",
					data: {},
					method: "post",
					header: {
						"content-type": "application/x-www-form-urlencoded",
						token: uni.getStorageSync("token")
					},
					success: res => {
						than.GWClist = res.data.data
						if (than.GWClist.length != 0) {  //不等于0，购物车有菜
								than.GWClist.forEach(k => {
									if(k.detail.goods){ //私房菜菜页面
										var than = this                          
										uni.request({
											url: getApp().globalData.http + "/shoppingCart/clear",
											data: {},
											method: "post",
											header: {
												"content-type": "application/x-www-form-urlencoded",
												token: uni.getStorageSync("token")
											},
											success: res => {
												than.GWClist = []
											}
										})
									}
								});
							}

						than.GWClist.forEach(e => {
							e.idNum = e.id
							than.goods.forEach(foods => {
								foods.foods.forEach(d => {
									if (e.goods_id == d.id) {
										d.num = e.num
										d.idNum = e.id
									}								
							  });
							});
						});
					}
				});
			},
			decreaseCart(item) {  //减菜
				var than = this;
				uni.request({
					url: getApp().globalData.http + "/shoppingCart/remove",
					data: {
						id:item.idNum,
						num:1,
					},
					method: "post",
					header: {
						"content-type": "application/x-www-form-urlencoded",
						token: uni.getStorageSync("token")
					},
					success: res => {
						if (res.data.code == 1) {
							if (item.num) {
								item.num--						
								than.goods.forEach((good) => {
									good.foods.forEach(foods => {
										if (item.idNum == foods.idNum){
											foods.num = item.num
										}
								
									});
								})
								than.getGWC()
							}
						} else {
							wx.showToast({
								title: res.data.msg,
								icon: "none",
								duration: 2000
							});
						}
					}
				});
			},
			delAll() {  	// 清空购物车
				var than = this;
				uni.request({
					url: getApp().globalData.http + "/shoppingCart/clear",
					data: {},
					method: "post",
					header: {
						"content-type": "application/x-www-form-urlencoded",
						token: uni.getStorageSync("token")
					},
					success: res => {
						if (res.data.code == 1) {
							than.GWClist = []
							this.goods.forEach((good) => {
								good.foods.forEach((food) => {
									if (food.num) {
										food.num = 0
									}
								})
							})
						} else {
							wx.showToast({
								title: res.data.msg,
								icon: "none",
								duration: 2000
							});
						}
					}
				});
			},
			search(e){
				wx.navigateTo({
					url: "/pages/my/search1?value=" + e.value
				})
			},
			tijiaock(){
				wx.navigateTo({
					url: "/pages/my/cfdistribution"
				})
				
			},

			// 点击侧边栏
			select(index) {
				this.currentIndex = index;
				this.setScrollH(index);
			},
	
			// 设置点击侧边栏右边滚动的高度
			setScrollH: function(index) {
				var that = this;
				let height = 0;
				var query = uni.createSelectorQuery();
				let foods = query.selectAll('.foods');
				this.$nextTick(function() {
					foods.fields({
						size: true
					}, data => {
						if (index == 0) {
							that.foodSTop = 0;
						}
						for (let i = 0; i < index; i++) {
	
							height += parseInt(data[i].height);
							that.foodSTop = height;
						}
	
					}).exec();
				})
	
			},
			
			getHeightList() {
				let _this = this;
				let selectorQuery = uni.createSelectorQuery().in(this);
				selectorQuery.select('.left-content').boundingClientRect(function(rects) {
					_this.left_height = rects.height;
				});
				selectorQuery.selectAll('.foods').boundingClientRect(function(rects) {
					_this.right_height = rects.map((item) => item.top);
				}).exec();
			},
			myscroll(e) {
				
			}
		}
	}
</script>
<style scoped>
	.pesong-sj{ bottom: 59px!important; }
	.zbc {
		position: fixed;
		width: 100%;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 999;
	}
	.xiuxi{
		width: 80%;
		background-color: #fff;
		text-align: center;
		margin-left: 10%;
		margin-top: 35%;
		padding: 15px 0;
		border-radius: 5px;
	}
	.current {
		position: relative;
		z-index: 0;
		background-color: #fff;
		color: #00A0DC;
		border-left: 5px solid #00A0DC;
	}
	
	.menu-wrapper {
		text-align: center;
		width: 25%;
		display: flex;
		flex-direction: column;
		background: #f3f5f7;
	
	}
	
	.menu-item {
		width: 100%;
		display: flex;
		font-size: 24upx;
		align-items: center;
		justify-content: center;
		height: 40px;
	}
	
	.allcount {
		position: absolute;
		right: 6px;
		top: 8px;
		display: inline-block;
		padding: 0 4px;
		font-size: 9px;
		line-height: 16px;
		font-weight: 400;
		border-radius: 50%;
		background-color: #f01414;
		color: #ffffff;
	}
	
	.foods-wrapper {
		margin-left: 4px;
		width: 75%;
	}
	
	.food,
	.food-btm,.main-box{
		display: flex;
		flex-direction: row;
	}
	.food-info {
		margin-left: 10px;
		margin-right: 16px;
		display: flex;
		flex-direction: column;
		flex: 2;
	}
	
	.food-btm {
		justify-content: space-between;
	}
	
	.food-price {
		color: #f01414;
		font-size: 16px;
	}
</style>
